<template>
	<!-- <view class="list"> -->
		<publicList :list="list" :addpageUrl="'/pages/monitor/medicalRecord/addMedical'" @detail="detail" @savestate="savestate" :options="options"  @bindClick="bindClick" :nullData="nullData"></publicList>
		<!-- <view class="header" @click="toAdd">
			<image mode="aspectFill" class="add-icon" src="@/static/img/monitor/add-icon.png"></image>
			<span>添加新的就医记录</span>
		</view>
		<uni-swipe-action>
			<view class="content">
				<view class="list-item" v-for="(item,index) in list" :key="index" >
					<uni-swipe-action-item :right-options="options"  @click="bindClick(item)">
						<view class="list-item-left"  @click="jump(item)">
							<image mode="aspectFill" src="../../../static/img/monitor/not-archived.png"></image>
							<text>{{item.userName}}</text>
						</view>
						<view class="list-item-right" @click="jump(item)">
							<view class="info">
								<p>就医编号：{{item.medicalNumber || '未存档'}}</p>
								<p>就医时间：{{item.medicalDate}}</p>
								<p>就医名称：{{item.medicalInstitutions}}</p>
							</view>
							<span :class="['status',!item.status || item.status == 1?'not-active':'active']">{{!item.status || item.status == 1?'未存档':'已存档'}}</span>
						</view>
					</uni-swipe-action-item>
				</view>
			</view>
			
		</uni-swipe-action> -->
	<!-- 		
	</view> -->
</template>

<script>
	import publicList from '@/components/publicList/index.vue'
	export default {
		components:{publicList},
		data () {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EE2437' // 删除按钮背景  红的
					}
				}],
				list: [],
				showModal: false,
				showContent: '',
				delId: '',
				nullData: false,
				page:1,
				pageIndex: 1,
				pageSize: 10
			}
		},
		onLoad() {
			this.getList({pageIndex:this.pageIndex,pageSize:this.pageSize})
		},
		onReachBottom() {
			if(this.nullData == true){
				return;
			}
			this.page = this.page + 1
			this.getList({pageIndex:this.page,pageSize:this.pageSize})
		},
		methods: {
			detail(e) {
				uni.navigateTo({
					url: '/pages/monitor/medicalRecord/addMedical?id='+e.id+'&status='+e.status
				})
			},
			savestate(e) {
				const AppDrugsRecordReq = {
					medicalInstitutions: e.medicalInstitutions,
					medicalDate: e.medicalDate,
					urls: e.urlList,
					status: 2,
					id:e.id
				}
				this.$api.AppMedicalRecordsUpdate(e.id,AppDrugsRecordReq).then((res) => {
					if(res.data.returnCode == 200) {
						uni.showToast({
							title:'存档成功',
							icon: 'none'
						})
						this.deleteList = 1
						this.getList({pageIndex:this.page,pageSize:this.pageSize})
					}
				})
			},
			bindClick(e) {
				this.$api.AppMedicalRecordsDelete(e.id).then((res) => {
					if(res.data.returnCode == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.deleteList = 1
						setTimeout(() => {
							this.getList({pageIndex:this.page,pageSize:this.pageSize})
						},500)
					}
				})
			},
			getList(data) {
				this.$api.AppMedicalRecordsList(data).then((res) => {
					if(res.data.returnCode == '200') {
						var data = res.data.result && res.data.result.list;
						if(this.deleteList == 1) {
							this.list = []
							this.list = data
							this.deleteList = ''
						}else {
							this.list = this.list ? this.list.concat(data) : data
						}
						if(this.list.length >= res.data.result.totalCount){
							this.nullData = true;
						}
					}
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/monitor/medicalRecord/addMedical'
				})
			},
			randomRgbaColor(index) {
				var textcolor = ['#04D68F','#FF9869','#7079EA','#D17BE5'];
				var b = ''
				if(index >= 4){
					b = textcolor[index%4]; 
				}else{
					b = textcolor[index]; 
				}
				return b; //返回rgba(r,g,b,a)格式颜色
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		.content{
			padding-top: 132upx;
		}
		.header{
			width: 100vw;
			padding:22upx 24upx 26upx;
			background: #38CB97;
			display: flex;
			align-items: center;
			position: fixed;
			top:88upx;
			z-index: 10;
			.add-icon{
				width: 82upx;
				height: 82upx;
				margin-right: 36upx;
			}
			span{
				flex:1;
				font-size: 36upx;
				color: #fff;
			}
			.search{
				width: 168upx;
				height: 48upx;
				background: rgba(255,255,255,.25);
				display: flex;
				align-items: center;
				image{
					width: 22upx;
					height: 22upx;
					margin-left: 17upx;
					margin-right: 13upx;
				}
				input{
					font-size: 22upx;
					flex:1;
					height: 48upx;
					color: #fff;
				}
			}
		}
		min-height: 100vh;
		background: #f8f8f8;
		&-item{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 24upx;
			background: #fff;
			.uni-swipe{
				width: 100%;
			}
			&-left{
				margin-left: 24upx;
				margin-top: 63upx;
				width: 100upx;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				color: #fff;
				margin-right:38upx;
				border-radius: 8upx;
				font-size: 26upx;
				position: relative;
				image{
					width: 92upx;
					height: 106upx;
				}
				text {
					width: 92upx;
					position: absolute;
					bottom: -30upx;
					color: #FFFFFF;
					font-size: 24upx;
					left: 0;
					overflow: hidden;    
					text-overflow:ellipsis;    
					white-space: nowrap;
					display: block;
					text-align: center;
				}
			}
			&-right{
				margin-right: 24upx;
				flex:1;
				display: flex;
				padding:37upx 0 46upx 0;
				.info{
					flex:1;
					p{
						margin-top: 8upx;
						max-width: 486upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.status{
					font-size: 26upx;
					&.not-active{
						color: #1A85E9;
					}
					&.active{
						color: #38CB97;
					}
				}

			}
		}
	}
</style>
